<div class="c-sw-rule">
  <div class="c-sw-rule__ui l-compact-form l-widget-rule s-widget-rule has-local-controls">
    <div class="c-sw-rule__ui__header widget-rule-header">
      <div class="c-sw-rule__grippy-wrapper">
        <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
      </div>
      <div
        class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"
      ></div>
      <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
        <div class="c-sw__icon js-sw__icon"></div>
        <div class="c-sw__label js-sw__label"></div>
      </div>
      <div class="flex-elem rule-title">Default Title</div>
      <div class="flex-elem rule-description grows">Rule description goes here</div>
      <div class="flex-elem c-local-controls--show-on-hover l-rule-action-buttons-wrapper">
        <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
        <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
      </div>
    </div>
    <div class="widget-rule-content expanded">
      <ul>
        <li>
          <label>Rule Name:</label>
          <span class="controls">
            <input class="t-rule-name-input" type="text" />
          </span>
        </li>
        <li class="connects-to-previous">
          <label>Label:</label>
          <span class="controls t-label-input">
            <input class="t-rule-label-input" type="text" />
          </span>
        </li>
        <li class="connects-to-previous">
          <label>Message:</label>
          <span class="controls">
            <input
              type="text"
              class="lg s t-rule-message-input"
              placeholder="Will appear as tooltip when hovering on the widget"
            />
          </span>
        </li>
        <li class="connects-to-previous">
          <label>Style:</label>
          <span class="controls t-style-input"></span>
        </li>
      </ul>
      <ul class="t-widget-rule-config">
        <li>
          <label>Trigger when</label>
          <span class="controls">
            <select class="t-trigger">
              <option value="any">any condition is met</option>
              <option value="all">all conditions are met</option>
            </select>
          </span>
        </li>
        <li>
          <label></label>
          <span class="controls">
            <button class="c-button add-condition icon-plus">
              <span class="c-button__label">Add Condition</span>
            </button>
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div class="t-drag-indicator l-widget-rule s-widget-rule" style="opacity: 0" hidden></div>
</div>
